<template>
  <div class="mainpg">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="mainor_form">
          <div class="mainor_te">
            <el-button type="primary" @click="saveAll">保存</el-button>
          </div>
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="配送日期" prop="send_time">
              <el-date-picker
                v-model="form.send_time"
                type="date"
                class="wid220"
                :editable="false"
                placeholder="选择配送日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
              />
            </el-form-item>

            <el-form-item class>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="middle_box">
          <div class="line_box">
            <ul>
              <li
                v-for="(item, index) in info.line"
                :key="index"
                :class="[info.line_id == index ? 'line_selected' : '']"
                @click="changeLine(index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          <div class="car_box">
            <div class="left">
              <div class="line_brief">
                <p>线路简报：</p>
                <p>
                  用户数量：
                  <em>{{ info.line_set_members }}</em>
                </p>
                <p>
                  订单数量：
                  <em>{{ info.line_set_orders }}</em>
                </p>
                <p>
                  总体积(m³)：
                  <em>{{ info.line_set_volume }}</em>
                </p>
                <p>
                  总重量(t)：
                  <em>{{ info.line_set_weight }}</em>
                </p>
              </div>
              <div class="carlist">
                <h3>车辆：</h3>
                <div class="carlist_left">
                  <el-button
                    v-for="(item, index) in info.cars"
                    :key="index"
                    :type="info.car_id == index ? 'primary' : ''"
                    @click="changeCar(index)"
                    >{{ item }}</el-button
                  >
                </div>
              </div>
              <div class="car_brief">
                <p>车辆简报：</p>
                <p>
                  用户数量：
                  <em>{{ info.car_set_members }}</em>
                </p>
                <p>
                  订单数量：
                  <em>{{ info.car_set_orders }}</em>
                </p>
                <p>
                  体积(m³)：
                  <em>{{ info.car_set_volume }}</em>
                </p>
                <p>
                  重量(t)：
                  <em>{{ info.car_set_weight }}</em>
                </p>
              </div>
            </div>
            <div class="right">
              <p>1.以商品体积重量，车辆货箱容量载重， 权重设置为依据。</p>
              <p>2.系统自动计算出最优线路分配、车辆使用方案</p>
              <p>3.计算结果可干预，如拖动用户配送顺序、更新车辆等</p>
              <p>4.需手动确认系统计算的结果，最终生成当天配送方案</p>
            </div>
          </div>
        </div>
        <div class="main_table" style="min-height: 550px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="info.data"
            element-loading-text="加载中"
            fit
            highlight-current-row
            row-key="uid"
          >
            <el-table-column width="50" label="" prop="">
              <template>
                <span class="el-icon-rank move_mark"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="用户名称"
              prop="nickname"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{ scope.row.nickname }}
              </template>
            </el-table-column>
            <el-table-column
              label="用户编码"
              prop="user_code"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="区域"
              prop="region_name"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="收货地址 "
              prop="address"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="订单数量"
              prop="order"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="体积 (㎡)"
              prop="volume"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="重量  (t)"
              prop="weight"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="排线状态"
              prop=""
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span :class="'is_set' + scope.row.is_set">{{
                  scope.row.is_set == 0 ? "未排线" : "已排线"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="管理操作" prop="">
              <template slot-scope="scope">
                <el-link type="primary" @click="showVisible(scope)"
                  >更换</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <el-pagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 路线 -->
    <el-dialog
      title="换线"
      :visible.sync="lineVisible"
      class="main_dialog dialog550"
    >
      <div>
        <p class="exptitle margintop">可换路线</p>
        <el-radio-group v-model="line_select" @change="lineChange">
          <el-radio
            v-for="(line, index) in line_list"
            :key="index"
            :label="index"
            >{{ line }}</el-radio
          >
        </el-radio-group>
      </div>
      <div class="car_box_dialog" v-loading="carLoading">
        <p class="exptitle margintop">可换车辆</p>
        <el-radio-group v-model="car_select">
          <el-radio
            v-for="(car, index) in car_list"
            :key="index"
            :label="index"
            >{{ car }}</el-radio
          >
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="lineVisible = false">取 消</el-button>
        <el-button type="primary" @click="save_line">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  lineSmartSet_index,
  lineSmartSet_save,
  lineSmartSet_change,
  lineSmartSet_getCar,
} from "@/api/distribution/distributionLinePlan";
import rules from "@/rules/distribution/distributionLine";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import dateOption from "@/options/dateOption";
import Sortable from "sortablejs";
export default {
  components: {},
  data() {
    return {
      parseTime,
      dateOption,
      // 增加和编辑
      info: {
        title: "",
      },
      radio: "",
      type: 0,
      id: 0,
      addedFormVisible: false,
      // 搜索
      form: {
        line_id: 0,
        car_id: 0,
        send_time: parseTime(new Date(), "{y}-{m}-{d}"),
      },
      time: [],
      // 验证
      rules,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      info: {
        car_id: "",
        car_set_members: "",
        car_set_orders: "",
        car_set_volume: "",
        car_set_weight: "",
        cars: "",
        data: [],
        line: {},
        line_id: "",
        line_set_members: "",
        line_set_orders: "",
        line_set_volume: "",
        line_set_weight: "",
      },
      listLoading: false,
      carLoading: false,
      // 弹窗
      lineVisible: false,
      uid: "",
      car_select: "",
      line_select: "",
      line_list: [],
      car_list: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.info.data.splice(oldIndex, 1)[0];
          _this.info.data.splice(newIndex, 0, currRow);
        },
      });
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.lineSmartSet_index();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.lineSmartSet_index();
    },
    //切换线路
    changeLine(id) {
      this.info.line_id = id;
      this.form.line_id = id;
      this.info.car_id = 0;
      this.form.car_id = 0;
      this.lineSmartSet_index();
    },
    // 切换车辆
    changeCar(id) {
      this.info.car_id = id;
      this.form.car_id = id;
      this.lineSmartSet_index();
    },
    showVisible(scope, type) {
      this.uid = scope.row.uid;
      this.lineVisible = true;
    },
    lineChange(val) {
      this.lineSmartSet_getCar(val);
    },
    save_line() {
      let form = {
        uid: this.uid,
        line_id: this.line_select,
        car_id: this.car_select,
        send_time: this.form.send_time,
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      lineSmartSet_change(data).then((res) => {
        if (res.errcode == 0) {
          this.lineSmartSet_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
      this.lineVisible = false;
    },

    saveAll() {
      let form = JSON.parse(JSON.stringify(this.form));
      let arr = [];
      this.info.data.map((e) => {
        if (e.is_set == 0) {
          arr.push(e.uid);
        }
      });
      form.uids = JSON.stringify(arr);
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      lineSmartSet_save(data).then((res) => {
        if (res.errcode == 0) {
          this.lineSmartSet_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.lineSmartSet_index();
    },
    changePage(page) {
      this.current.page = page;
      this.lineSmartSet_index();
    },
    //获取车辆
    lineSmartSet_getCar(line_id) {
      this.carLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { line_id: line_id }
      );
      lineSmartSet_getCar(data).then((res) => {
        if (res.errcode == 0) {
          this.car_list = res.data.cars;
          this.carLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 列表
    lineSmartSet_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        JSON.parse(JSON.stringify(this.form)),
        this.current
      );
      lineSmartSet_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          let arr = [];
          for (let key in res.data.data) {
            arr.push(res.data.data[key]);
          }
          this.form.line_id = res.data.line_id;
          this.form.car_id = res.data.car_id;
          this.info = res.data;
          this.info.data = arr;
          this.line_list = res.data.line;
          this.car_list = res.data.cars;
          this.totalCount = res.data.count;
          if (res.data.line_id) {
            this.line_select = res.data.line_id.toString();
          }
          if (res.data.car_id) {
            this.car_select = res.data.car_id.toString();
          }
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  created() {
    // 列表
    this.lineSmartSet_index();
  },
  mounted() {
    this.rowDrop();
  },
};
</script>
<style lang="scss" scoped>
.mainor_form form {
  width: calc(100% - 120px);
}
.el-button + .el-button {
  margin-left: 0;
}
// 线路
.middle_box {
  width: 100%;
  margin-bottom: 25px;
  .line_box {
    width: 100%;
    border-bottom: 1px solid #e3e3e5;
    ul {
      width: 100%;
      padding: 0 5px;
      display: flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        display: inline;
        font-size: 16px;
        color: #333333;
        margin-right: 25px;
        margin-bottom: 6px;
        cursor: pointer;
      }
      .line_selected {
        color: #03a98e;
        border-bottom: 2px solid #03a98e;
      }
    }
  }
}
.car_box {
  padding-top: 15px;
  display: flex;
  flex-direction: row;
  .left {
    flex: 7;
  }
  .right {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    p {
      padding-left: 45px;
      line-height: 1.5;
      font-size: 14px;
      color: #5a5a5a;
    }
  }
  .car_brief,
  .line_brief {
    display: flex;
    align-items: center;
    p {
      display: inline;
      color: #181818;
      font-size: 14px;
      margin-right: 15px;
      em {
        color: #e47c02;
      }
    }
  }

  .carlist {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 10px 0;
    h3 {
      display: block;
      width: 50px !important;
      color: #333333;
      font-size: 16px;
      padding-top: 10px;
    }
    .carlist_left {
      flex: 1;
      .el-button {
        margin: 5px 15px 5px 0;
        min-width: 60px;
      }
    }
  }
}
.exptitle {
  display: block;
  font-size: 16px;
  color: #000000;
  margin: 0 0 10px;
  cursor: pointer;
}
/deep/.el-radio-group {
  margin-bottom: 15px;
}
/deep/.el-radio {
  margin-bottom: 6px;
}
/deep/ .el-radio__inner {
  border-color: #dcdfe6;
}
.car_box_dialog {
  min-height: 87px;
}
.is_set0 {
  color: #eb0a0a;
}
.is_set1 {
  color: #03a98e;
}
.move_mark {
  font-size: 16px;
  font-weight: 500;
  cursor: move;
}
</style>
